.xblock--drag-and-drop {
    width: auto;
    max-width: 770px;
    margin: 0;
    padding: 0;
    position: relative;
}

.xblock--drag-and-drop .resize-detector {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    visibility: hidden;
}

.xblock--drag-and-drop .initial-load-spinner {
    margin-right: 3px;
}

/* Button style tricks, defined higher so they can be overridden */

.xblock--drag-and-drop .unbutton {
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
}

.xblock--drag-and-drop .unbutton:active {
    background: none;
    box-shadow: none;
    border: none;
}

.xblock--drag-and-drop .unbutton:hover {
    background: none;
    box-shadow: none;
    border: none;
}

.xblock--drag-and-drop .unbutton:focus {
    background: none;
    box-shadow: none;
    border: none;
}

/* Header, instruction text, etc. */

.xblock--drag-and-drop .problem-progress {
    display: inline-block;
    color: #5e5e5e;
    font-size: 0.875em;
    margin-bottom: 0.5em;
}

.xblock--drag-and-drop .problem p {
    margin-bottom: 1.41575em;
}

/* Shared styles used in header and footer */

.xblock--drag-and-drop .title1 {
    color: #555555;
    text-transform: uppercase;
    font-weight: bold;
    font-style: normal;
    margin: 10px 0;
    margin-top: 20px;
}

/* drag-container holds the .items and the .target image */

.xblock--drag-and-drop .drag-container {
    box-sizing: border-box;
    width: auto;
    padding: 1%;
    background-color: #ebf0f2;
    position: relative;
}

/*** DRAGGABLE ITEMS ***/

.xblock--drag-and-drop .item-bank {
    display: -ms-flexbox;
    display: flex;

    -ms-flex-flow: row wrap;
    flex-flow: row wrap;

    -ms-justify-content: flex-start;
    justify-content: flex-start;

    -ms-flex-align: center;
    align-items: center;

    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 0; /* padding: 5px looks better but makes some blocks to change in size when dropped onto the target; */
}

.xblock--drag-and-drop .drag-container .option {
    display: inline-block;
    width: auto;
    min-width: 4em;
    max-width: 30%;
    border: 1px solid transparent;
    border-radius: 3px;
    box-sizing: border-box;
    margin: 5px;
    padding: 10px;
    text-align: center;
    background-color: #1d5280;
    font-size: 14px;
    color: #fff;
    opacity: 1;
    outline-color: #fff;
    outline-style: none;
    /* Some versions of the drag and drop library try to fiddle with this */
    z-index: 10 !important;
    -webkit-touch-callout: none;
}

@media screen and (max-width: 480px) {
   /* Horizontal scroll for item bank on mobile */
    .xblock--drag-and-drop .item-bank {
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        overflow-x: auto;
    }

    .xblock--drag-and-drop .drag-container .item-bank .option {
        flex-shrink: 0;
        flex-grow: 0;
        max-width: 80%;
    }
}

.xblock--drag-and-drop .drag-container .option.specified-width img {
    width: 100%;  /* If the image is smaller than the specified width, make it larger */
}

.xblock--drag-and-drop .drag-container .option.option-with-image .spinner-wrapper {
    position: absolute;
    float: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.6;
    color: #fff;
    margin: 0;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

.xblock--drag-and-drop .drag-container .option .item-content {
    display: inline-block;
    width: 100%; /* Make sure size of content never exceeds size of item */
                 /* (this can happen if item displays image whose width exceeds computed max-width of item) */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Placed option */
.xblock--drag-and-drop .drag-container .target .option {
    position: absolute;
    margin: 0;
    transform: translate(-50%, -50%); /* These blocks are to be centered on their absolute x,y position */
}
/* Dragging placed option to a different zone in assessment mode */
.xblock--drag-and-drop .drag-container .target .option.grabbed-with-mouse {
    transform: none; /* The transform messes with jQuery UI Draggable positioning, */
                     /* so remove it while dragging with the mouse. */
}

/* Placed options in an aligned zone */
.xblock--drag-and-drop .zone .item-wrapper {
    width: 100%;
    position: relative;
}
.xblock--drag-and-drop .zone .item-align .option {
    transform: none;
    position: relative;
    vertical-align: top;
    margin-right: 2px;
    margin-bottom: 2px;
}
.xblock--drag-and-drop .zone .item-align-left {
    text-align: left;
}
.xblock--drag-and-drop .zone .item-align-right {
    text-align: right;
}
.xblock--drag-and-drop .zone .item-align-center {
    text-align: center;
}
.xblock--drag-and-drop .zone .item-align-center .option {
    display: inline-block;
    margin-left: 1px;
    margin-right: 1px;
}

/* Focused option */
.xblock--drag-and-drop .drag-container .option[draggable='true']:focus,
.xblock--drag-and-drop .drag-container .option[draggable='true']:hover,
.xblock--drag-and-drop .drag-container .option[draggable='true'][aria-grabbed='true'] {
    outline-width: 2px;
    outline-style: dotted;
    outline-offset: -4px;
    /* IE 11 doesn't support outline-offset, so we use a box-shadow instead. */
    box-shadow: inset 0 0 0 2px;
}

.xblock--drag-and-drop .drag-container .option.grabbed-with-mouse {
    box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.3);
    border: 1px solid #ccc;
    opacity: .65;
    z-index: 20 !important;
    margin: 0; /* Allow the draggable to touch the edges of the target image */
}
.xblock--drag-and-drop .drag-container .item-align-center .option.grabbed-with-mouse {
    margin: 0 auto; /* Revert to auto margin when dragging with mouse to not confuse jQuery UI draggable */
}

.xblock--drag-and-drop .drag-container .option img {
    display: inline-block;
    max-width: 100%;
}

.xblock--drag-and-drop .drag-container .option.fade {
    opacity: 0.80;
}

/*** DROP TARGET ***/

.xblock--drag-and-drop .target {
    display: table;
    /* 'display: table' makes this have the smallest size that fits the .target-img
       while still allowing the image to use 'max-width: 100%' and scale proportionally.
       The end result is that this element has the same width and height as the image, so we
       can use it as a 'position: relative' anchor for the placed elements. */
    height: auto;
    position: relative;
    margin-top: 1%;
    background-color: #fff;
}

.xblock--drag-and-drop .target-img-wrapper {
    /* This element is required for Firefox due to https://bugzilla.mozilla.org/show_bug.cgi?id=975632 */
    display: table-row;
}

.xblock--drag-and-drop .target-img {
    display: table-cell;
    width: 100%;
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 480px) {
    .xblock--drag-and-drop .target {
        overflow: auto;
        display: block;
    }

    .xblock--drag-and-drop .target-img {
        max-width: none;
        width: auto;
    }

    .xblock--drag-and-drop .target-img-wrapper {
        display: inline-block;
        position: relative;
    }
}

.xblock--drag-and-drop .zone {
    position: absolute;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    /* Internet Explorer 10 */
    -ms-flex-pack:center;
    -ms-flex-align:center;

    /* Firefox */
    -moz-box-pack:center;
    -moz-box-align:center;

    /* Safari, Opera, and Chrome */
    -webkit-box-pack:center;
    -webkit-box-align:center;

    /* W3C */
    box-pack:center;
    box-align:center;
}

.xblock--drag-and-drop .zone-with-borders {
    border: 1px dotted #565656;
}

/* Focused zone */
.xblock--drag-and-drop .item-bank:focus,
.xblock--drag-and-drop .zone:focus {
    outline: 2px dotted #a5a5a5;
}

.xblock--drag-and-drop .drag-container .target .zone p {
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 10px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*** FEEDBACK ***/

.xblock--drag-and-drop .feedback {
    margin-bottom: 1%;
    border-top: solid 1px #bdbdbd;
}

.xblock--drag-and-drop .feedback p {
    margin: 2px 0;
    padding: 0.5em;
    border: 2px solid #999;
}

.xblock--drag-and-drop .feedback p.correct {
    color: #166e36;
    border: 2px solid #166e36;
}

.xblock--drag-and-drop .feedback p.partial {
    color: #166e36;
    border: 2px solid #166e36;
}

.xblock--drag-and-drop .feedback p.incorrect {
    color: #b20610;
    border: 2px solid #b20610;
}


/* Font Awesome icons have different width - margin-right tries to compensate it */
.ltr .xblock--drag-and-drop .feedback p:before,
.rtl .xblock--drag-and-drop .feedback p:after {
    content: "\f129";
    font-family: FontAwesome;
}

.ltr .xblock--drag-and-drop .feedback p:before {
    margin-right: 0.7em;
    margin-left: 0.3em;
}

.rtl .xblock--drag-and-drop .feedback p:after {
    margin-left: 0.7em;
    margin-right: 0.3em;
}

.ltr .xblock--drag-and-drop .feedback p.correct:before,
.rtl .xblock--drag-and-drop .feedback p.correct:after {
    content: "\f00c";
    font-family: FontAwesome;
}

.ltr .xblock--drag-and-drop .feedback p.correct:before {
    margin-right: 0.3em;
    margin-left: 0;
}

.rtl .xblock--drag-and-drop .feedback p.correct:after {
    margin-left: 0.3em;
    margin-right: 0;
}

.ltr .xblock--drag-and-drop .feedback p.partial:before,
.rtl .xblock--drag-and-drop .feedback p.partial:after {
    content: "\f069";
    font-family: FontAwesome;
}

.ltr .xblock--drag-and-drop .feedback p.partial:before {
    margin-right: 0.3em;
    margin-left: 0;
}

.rtl .xblock--drag-and-drop .feedback p.partial:after {
    margin-left: 0.3em;
    margin-right: 0;
}

.ltr .xblock--drag-and-drop .feedback p.incorrect:before,
.rtl .xblock--drag-and-drop .feedback p.incorrect:after {
    content: "\f00d";
    font-family: FontAwesome;
}

.ltr .xblock--drag-and-drop .feedback p.incorrect:before {
    margin-right: 0.45em;
    margin-left: 0.1em;
}

.rtl .xblock--drag-and-drop .feedback p.incorrect:after {
    margin-left: 0.45em;
    margin-right: 0.1em;
}

.xblock--drag-and-drop .popup {
    position: absolute;
    top: 5%;
    right: 5%;
    border: 1px solid #fff;
    background-color: rgba(0, 0, 0, 0.8);
    width: 500px;
    max-width: 90%;
    min-height: 50px;
    max-height: 90%;
    overflow-y: auto;
    z-index: 100;
}

.xblock--drag-and-drop .popup.popup-incorrect {
    background-color: rgba(173, 13, 13, 0.8);
}

.xblock--drag-and-drop .popup .popup-content {
    color: #ffffff;
    margin: 35px 15px 15px 15px;
    font-size: 14px;
}

.xblock--drag-and-drop .popup .popup-content img {
    max-width: 100%;
}

.xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
    cursor: pointer;
    margin-top: 8px;
    color: #ffffff;
    font-family: "fontawesome";
    font-size: 18pt;
}

.xblock--drag-and-drop .popup .close-feedback-popup-mobile-button {
    display: none;
}

.xblock--drag-and-drop .popup .popup-header-icon {
    display: none;
}

.xblock--drag-and-drop .popup .popup-header-text {
    display: none;
}

.xblock--drag-and-drop .popup .popup-header-icon.popup-header-icon-incorrect {
    color: #ff143e;
}

.ltr .xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
    float: right;
    margin-right: 8px;
    margin-left: 20px;
}

.rtl .xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
    float: left;
    margin-right: 20px;
    margin-left: 8px;
}

.xblock--drag-and-drop .popup .close-feedback-popup-desktop-button:focus {
    outline: 2px dotted white;
}

@media screen and (max-width: 480px) {
    .xblock--drag-and-drop .popup .popup-content p {
        text-align: center;
    }

    .xblock--drag-and-drop .popup {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 0 100px rgba(0,0,0,0.4);
        border: none;
        max-height: 90vh;
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
    }

    .xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
        display: none;
    }

    .xblock--drag-and-drop .popup.popup-incorrect {
        background-color: #fff;
    }

    .xblock--drag-and-drop .popup .popup-header-icon {
        display: inline-block;
        margin-top: 10px;
        color: #629a2c;
        font-size: 20pt;
    }

    .xblock--drag-and-drop .popup .popup-header-icon.popup-header-icon-incorrect {
        color: #ff143e;
    }

    .xblock--drag-and-drop .popup .popup-header-text {
        display: block;
        padding: 2px 0 8px;
        font-weight: 600;
    }

    .xblock--drag-and-drop .popup .popup-content {
        color: #629a2c;
        margin: 10px 0px 0px 0px;
        font-size: 14px;
        background-color: #f4ffe7;
        padding: 20px;
        border-color: #eee;
        border-style: solid;
        border-width: 1px 0 1px 0;
        flex-shrink: 1;
        overflow: auto;
    }

    .xblock--drag-and-drop .popup .popup-content ul {
        list-style-position: inside;
        padding: 0;
    }

    .xblock--drag-and-drop .popup .popup-content.popup-content-incorrect {
        color: #ff143e;
        background-color: #ffe8ec;
    }

    .xblock--drag-and-drop .popup .close-feedback-popup-mobile-button {
        display: inline;
        cursor: pointer;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #3384ca;
        font-size: 12pt;
        padding: 10px;
    }
}


/*** edX pattern library components ***/

/* reset stock edx-platform button styles */
.xblock--drag-and-drop button,
.xblock--drag-and-drop button:hover,
.xblock--drag-and-drop button.is-hovered,
.xblock--drag-and-drop button:focus,
.xblock--drag-and-drop button.is-focused,
.xblock--drag-and-drop button:active,
.xblock--drag-and-drop button.is-active {
    box-shadow: none;
    text-shadow: none;
    background-image: none;
}

.xblock--drag-and-drop .btn-default,
.xblock--drag-and-drop .btn-brand {
    display: inline-block;
    font-weight: normal;
    -webkit-transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s;
    -moz-transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s;
    transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s;
    border-radius: 3px;
    border: 1px solid #0079bc;
    padding: 0.625em 1.25em;
    font-size: 1em;
}

.xblock--drag-and-drop .btn-default {
    border-color: transparent;
    background: transparent;
    color: #0074b4
}

.xblock--drag-and-drop .btn-brand {
  border-color: #0075b4;
  background: white;
  color: #0075b4;
}

.xblock--drag-and-drop .btn-small {
  padding: 0.625em 0.625em;
  font-size: 0.875em;
}

.xblock--drag-and-drop .btn-link {
    padding: 1px;
    font-size: 0.875em;
    font-weight: normal;
}

.xblock--drag-and-drop .btn-default:hover,
.xblock--drag-and-drop .btn-default.is-hovered,
.xblock--drag-and-drop .btn-default:focus,
.xblock--drag-and-drop .btn-default.is-focused {
    background-color: transparent;
    border: 1px solid #0074b4;
    color: #0074b4
}

.xblock--drag-and-drop .btn-default:active,
.xblock--drag-and-drop .btn-default.is-pressed,
.xblock--drag-and-drop .btn-default.is-active {
    border-color: #0074b4;
    color: #0074b4
}

.xblock--drag-and-drop .btn-default:disabled,
.xblock--drag-and-drop .btn-default.is-disabled {
    color: #6b6969
}

.xblock--drag-and-drop .btn-brand {
    border-color: #0074b4;
    background: #0074b4;
    color: #fcfcfc
}

.xblock--drag-and-drop .btn-brand:hover,
.xblock--drag-and-drop .btn-brand.is-hovered,
.xblock--drag-and-drop .btn-brand:focus,
.xblock--drag-and-drop .btn-brand.is-focused {
    border-color: #008bd8;
    background-color: #008bd8;
    color: #fcfcfc
}

.xblock--drag-and-drop .btn-brand:active,
.xblock--drag-and-drop .btn-brand.is-pressed,
.xblock--drag-and-drop .btn-brand.is-active {
    border-color: #0074b4;
    background: #0074b4
}

.xblock--drag-and-drop .btn-brand:disabled,
.xblock--drag-and-drop .btn-brand.is-disabled {
    border-color: #d2d0d0;
    background: #f2f3f3;
    color: #676666
}


/*** ACTIONS TOOLBAR ***/

.xblock--drag-and-drop .actions-toolbar {
    min-height: 3.75em;
    width: auto;
    position: relative;
}

.xblock--drag-and-drop .actions-toolbar .action-toolbar-item {
    display: inline-block;
    margin: 10px 0;
}

.xblock--drag-and-drop .attempts-used {
    font-size: 0.875em;
    color: #666;
}

.ltr .xblock--drag-and-drop .attempts-used {
    margin-left: 0.675em;
}

.rtl .xblock--drag-and-drop .attempts-used {
    margin-right: 0.675em;
}

.xblock--drag-and-drop .actions-toolbar .action-toolbar-item.sidebar-buttons {
    display: block;
}

.ltr .xblock--drag-and-drop .actions-toolbar .action-toolbar-item.sidebar-buttons {
    text-align: left;
}

.rtl .xblock--drag-and-drop .actions-toolbar .action-toolbar-item.sidebar-buttons {
    text-align: right;
}

@media (min-width: 768px) {
    .xblock--drag-and-drop .actions-toolbar .action-toolbar-item.sidebar-buttons {
        margin: 0;
    }

    .ltr .xblock--drag-and-drop .actions-toolbar .action-toolbar-item.sidebar-buttons {
        float: right;
        padding-right: -5px;
        padding-top: 5px;
    }

    .rtl .xblock--drag-and-drop .actions-toolbar .action-toolbar-item.sidebar-buttons {
        float: left;
        padding-left: -5px;
    }
}

.xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper {
    border-collapse: collapse;
    padding: 0 5px;
    display: inline-block;
    height: 100%;
}

.ltr .xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper {
    border-right: 1px solid #ddd;
}

.rtl .xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper {
    border-left: 1px solid #ddd;
}

.ltr .xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper:first-child {
    padding-left: 0;
}

.rtl .xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper:first-child {
    padding-right: 0;
}

.ltr .xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper:last-child {
    border-right: none;
    padding-right: 0;
}

.rtl .xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper:last-child {
    border-left: none;
    padding-left: 0;
}

.xblock--drag-and-drop .sidebar-buttons .btn-brand {
    display: inline-block;
    padding: 3px 5px;
}

.xblock--drag-and-drop .keyboard-help {
    margin-top: 3px;
    margin-bottom: 6px;
}

.xblock--drag-and-drop .btn-icon {
    display: block;
}

.xblock--drag-and-drop .btn-link .btn-icon {
    display: inline;
}

/*** ACTIONS TOOLBAR END ***/

/*** KEYBOARD HELP ***/
.xblock--drag-and-drop .keyboard-help-dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 1px;
    z-index: 1500;
}

.xblock--drag-and-drop .modal-window-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    z-index: 1500;
}

.xblock--drag-and-drop .modal-window {
    display: none;
    position: absolute;
    width: 600px;
    max-width: 90vw;
    height: auto;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    padding: 7px;
    background-color: #e5e5e5;
    text-align: left;
    z-index: 1500;
}

.rtl .xblock--drag-and-drop .modal-window {
    transform: translate(50%, -50%);
}

.xblock--drag-and-drop .modal-dismiss-button {
    font-size: 24px;
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 5px 8px;
}


.rtl .xblock--drag-and-drop .modal-dismiss-button {
    right: inherit;
    left: 3px;
}

.xblock--drag-and-drop .modal-header h2 {
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
}

.xblock--drag-and-drop .modal-content {
    border-radius: 5px;
    background-color: #ffffff;
    padding: 8px;
}

.xblock--drag-and-drop .modal-content li {
    margin-left: 2%;
}

/*** KEYBOARD HELP END ***/

/* Make sure screen-reader content is hidden in the workbench: */
.xblock--drag-and-drop .sr {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    background-color: #ffffff;
    color: #000000;
}


/* Prevent mobile browsers from emulating hover effects on item tap, which can be confusing. */
@media (hover: none) {
    .xblock--drag-and-drop .drag-container .option[draggable='true']:hover {
        outline: none;
        box-shadow: none;
    }
}
